<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <title>IMS&PCF操作维护系统</title>
    <script type="text/javascript" src="/static/public/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="/static/public/jquery.cookie.js"></script>
    <script type="text/javascript" src="/static/public/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js/common.js?" +new Date()></script>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css?v=20190922"/>
    <link rel="stylesheet" type="text/css" href="/static/css/primaryUserCss.css?v=20190922"/>

    <style type="text/css">
        .parameterGridBox {
            padding: 0 0 4px;
        }
        .btn_new {
            /*border: solid 1px #dfecf5;*/
            margin: 10px;
            width: 75px;
            height: 30px;
        }
        .tab_tile {
            font-size: 16px;
            font-weight: bolder;
        }
        .status_offline{
            font-size:5px;
            border-radius: 60%;
            padding:0 2px;
            margin:0 10px;
            color:white;
            background-color:gray;
            border:1px solid black;
        }
        .status_green{
            font-size:5px;
            border-radius: 60%;
            padding:0 2px;
            margin:0 10px;
            color:white;
            background-color:green;
            border:1px solid black;
        }
        .status_red{
            font-size:5px;
            border-radius: 60%;
            padding:0 2px;
            margin:0 10px;
            color:white;
            background-color:red;
            border:1px solid black;
        }
        .wifi_img{
            width:18px;
            height:15px;
            margin-right:10px;
        }

    </style>

    <script type="text/javascript">

        $(document).ready(function () {
            $('body').append('<div id="background" class="background" style="display: none;"></div><div id="progressBar" class="progressBar" style="display: none;">数据加载中，请稍等...</div>');
            var ajaxbg = $("#background,#progressBar");
            ajaxbg.hide();
            $(document).ajaxStart(function () {
                ajaxbg.show();
            }).ajaxStop(function () {
                ajaxbg.hide();
            });
        });



        function logout() {
            if (!window.confirm('确定注销？')) {
                return;
            }
            $.post("/logout", {
                reqType: 14
            }, function (data) {
                sessionStorage.removeItem("token");
                sessionStorage.removeItem("refresh_token");
                window.top.location = 'home.asp';
            });
        }



        $('document').ready(function () {
            initPage();
            initUserList();
            queryRunningStatus();
            $(document).ready(function() {
                $('#selectAll').click(function() {
                    if(this.checked) {
                        $('input[name="imsi_checkbox"]').prop('checked', true); //全选
                    } else {
                        $('input[name="imsi_checkbox"]').prop('checked', false); //反选
                    }
                });
            });
        });

        function initPage(){
            $.post('/config',{act:'get'},function(response){
                var data = response.data;
                $('#mcc').val(data.mcc);
                $('#mnc').val(data.mnc);
                var isRun = data.is_run;
                if(isRun){
                    $("#start_btn").attr("disabled",true);
                    $("#stop_btn").attr("disabled",false);
                } else {
                    $("#start_btn").attr("disabled",false);
                    $("#stop_btn").attr("disabled",true);
                }
            })
        }

        function savePlmn(){
            var mcc = $('#mcc').val();
            var mnc = $('#mnc').val();
            if(mcc=='' || mnc==''){
                alert("mcc/mnc不能为空");
                return;
            }
            var param = {
                act:'set',
                mcc:mcc,
                mnc:mnc
            }
            $.post("/config",param,function(data){
                alert(data.msg);
                if(data.status==200){
                    initPage();
                }
            });
        }

        function operateMachine(act){
            var msgMap={
                "1":"启动",
                "2":"关闭",
                "3":"重启",
            }
            if(!window.confirm(`确定要${msgMap[act]}吗？`)){
                return;
            }
            $.post("/operate",{act:act},function(response){
                alert(response.msg);
                if(response.status==200){
                    initPage();
                    queryRunningStatus();
                }
            });
        }

        function initUserList(){
            $.post("/whitelist",{act:'list'},function(response){
                var html = "";

                for(var i=0;i<response.data.length;i++){
                    var item = response.data[i]
                    html+=`<tr>
                    <td>${i+1}</td>
                    <td><input type="checkbox" name="imsi_checkbox" value="${item.imsi}"/></td>
                    <td>${item.imsi}</td>
                    <td>${item.voice_phone}</td>
                    <td>${item.ki}</td>
                    <td>${item.opc}</td>
                    <td><input type="button" onclick="delUserItem('${item.imsi}')" value="删除"></input></td>
                    </tr>`
                }
                $("#white_list_table tbody").html(html);
            })
        }

        function delSelectedUserItem(){
            var imsiSet = new Set();
            $('input[name="imsi_checkbox"]:checked').each(function() {
                var value = $(this).val();
                imsiSet.add(value)
            });
            if(imsiSet.size==0){
                alert("请先选择要删除的记录")
                return
            }
            delUserItem(Array.from(imsiSet).join(","))
        }

        function delUserItem(imsi){
            if(!window.confirm("确定要删除吗?")){
                return
            }
            $.post("/whitelist",{act:'del',imsi:imsi},function(response){
                alert(response.msg)
                if(response.status==200){
                    initUserList();
                }
            })

        }


        function saveUserItem(){
            if(!window.confirm(`确定要添加吗？`)){
                return;
            }
            var imsi = $("#imsi").val();
            if(imsi.length!=15){
                alert("IMSI输入错误")
                return
            }
            var msisdn = $("#msisdn").val();
            if(msisdn.length==0){
                alert("MSISDN输入错误")
                return
            }
            var ki = $("#ki").val();
            if(ki.length!=32){
                alert("KI输入错误")
                return
            }
            var opc = $("#opc").val();
            if(opc.length!=32){
                alert("OPC输入错误")
                return
            }
            var param = {
                act:'add',
                imsi:imsi,
                phone:msisdn,
                ki:ki,
                opc:opc
            }
            $.post("/whitelist",param,function(response){
                alert(response.msg)
                if(response.status==200){
                    initUserList();
                }
            })
        }


        function queryRunningStatus(){
            $.post("/get_running_status",{},function(response){
                var rst = response.data
                for(var item in rst){
                    $("#"+item+"_status").html(rst[item]['status'])
                }
            })
        }

        function batchAddUser(){
             var form = $("form[name=upgradeForm]");
             var options  = {
                url:'/batch_add_user',
                type:'post',
                success:function(data){
                    alert(data.msg);
                    initUserList();
                }
             };
             form.ajaxSubmit(options);
        }


        function showClosePwd(flg){
            if(flg=='1'){
                $("#change_pwd_div").show('slow');
            } else {
                $("#change_pwd_div").hide('slow');
            }
        }

        function save_pwd(){
            var oldPw = $("#old_pw").val();
            var newPw = $("#new_pw").val();
            var newPwConfirm = $("#new_pw_confirm").val();
            if(oldPw==''){
                alert('旧密码不能为空');
                return;
            }
            if(newPw==''){
                alert('新密码不能为空');
                return;
            }
            if(newPw!=newPwConfirm){
                alert('两次密码输入不一致，请确认');
                return;
            }
            $.post("/change_password",{"old_pw":oldPw,"new_pw":newPw} , function(response){
                if(response.status==200){
                   alert("密码修改成功，请重新登陆");
                    $.post("/logout", {
                        reqType: 14
                    }, function (data) {
                        window.top.location = 'home.asp';
                    });
                }else{
                    alert(response.msg);
                }
            });

        }

    </script>
</head>
<body>
<div style="float: right">{{ sn }}&nbsp;&nbsp;&nbsp;&nbsp;
    {% if session.user_id=='root' %}
    <a href="#" onclick="showCloseUser('1')">用户管理({{session.user_id}})</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    {% endif %}
    <a href="#" onclick="showClosePwd('1')">修改密码</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" onclick="logout()">注销</a>
</div>

<div class="mainContainer" style="margin-top: 20px;">
    {% if session.user_id=='root' %}
    <script type="text/javascript">
        function showCloseUser(flg){
            if(flg=='1'){
                $("#user_manage_div").show('slow');
            } else {
                $("#user_manage_div").hide('slow');
            }
        }

        function addUser(){
            var userName = $("#username").val();
            if(userName==""){
                alert("用户名不能为空");
                return;
            }
             $.post("/add_user",{"username":userName} , function(response){
                if(response.status==200){
                    alert("添加成功");
                    window.location.reload();
                }else{
                    alert('添加失败'+response.msg);
                }
            });
        }

        function resetPwd(userName){
            if(!window.confirm("确定要重置用户["+userName+"]密码吗？")){
                return;
            }
             $.post("/reset_password",{"username":userName} , function(response){
                if(response.status==200){
                    alert("密码重置成功");
                }else{
                    alert(response.msg);
                }
            });
        }

        function delUser(userName){
            if(!window.confirm("确定要删除用户["+userName+"]吗？")){
                return;
            }
            if(userName==""){
                alert("用户名不能为空");
                return;
            }
            $.post("/del_user",{"username":userName} , function(response){
                if(response.status==200){
                    alert("删除成功");
                    window.location.reload();
                }else{
                    alert(response.msg);
                }
            });
        }

        function showCloseUser(flg){
            if(flg=='1'){
                $("#user_manage_div").show('slow');
            } else {
                $("#user_manage_div").hide('slow');
            }
        }


    </script>
    <div class="innerBox" id="user_manage_div" style="overflow: auto;display:none">
        <div class="tabBar tab_tile">用户管理</div>
        <div class="parameterGridBox paramsDIV"
             style="overflow-y: auto;padding-left: 20px;padding-top: 20px">
            <table align="left" style="width: 900px;margin-right: 100px;" cellpadding="10" border="1">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for username,item in users.items() %}
                <tr>
                    <td>{{username}}</td>
                    <td>
                        <input type="button" value="删除" onclick="delUser('{{username}}')"/>
                        <input type="button" value="密码重置" onclick="resetPwd('{{username}}')"/>
                    </td>
                </tr>
                {% endfor %}
                <tr>
                    <td>
                        <input type="text" id="username" style="width: 250px;height: 20px;padding: 4px"
                               placeholder="请输入用户名"/>
                    </td>
                    <td>
                        <input type="button" class="btn_new" id="addUser" value="新增" onclick="addUser()"/>
                        <input type="button" value="关闭" id="close_btn" class="btn_new" onclick="showCloseUser('0')"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    <div class="innerBox" id="change_pwd_div" style="overflow: auto;display:none">
        <div class="tabBar tab_tile">修改密码</div>
        <div class="parameterGridBox paramsDIV"
             style="overflow-y: auto;padding-left: 20px;padding-top: 20px">
            <table>
                <tbody>
                <tr>
                    <th>旧密码：</th>
                    <td>
                        <input type="password" id="old_pw" style="width:200px"/>
                    </td>
                </tr>
                <tr>
                    <th>新密码：</th>
                    <td>
                        <input type="password" id="new_pw" style="width:200px"/>
                    </td>
                </tr>
                <tr>
                    <th>新密码确认：</th>
                    <td>
                        <input type="password" id="new_pw_confirm" style="width:200px"/>
                    </td>
                </tr>
                <tr>
                    <td align="center" colspan="2">
                        <input type="button" value="保存" id="save_pwd_btn" class="btn_new"
                               onclick="save_pwd()"/>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="button" value="关闭" id="close_pwd_btn" class="btn_new"
                               onclick="showClosePwd('0')"/>
                    </td>
                </tr>
                </tbody>

            </table>

        </div>
    </div>

    <div class="innerBox" style="overflow: auto;">
        <div class="tabBar tab_tile">配置管理</div>
        <div class="parameterGridBox paramsDIV"
             style="overflow-y: auto;padding-left: 20px;padding-top: 20px">
            <fieldset>
                <legend>参数配置</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width:200px">
                            <label>MCC：<input type="text" id="mcc"/></label>
                        </td>
                        <td style="width:200px">
                            <label>MNC：<input type="text" id="mnc"/></label>
                        </td>
                        <td>
                            <input type="button" value="保存配置" id="save_conf_btn" class="btn_new"
                                   onclick="savePlmn()"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>操作管理</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 720px">
                            <input type="button" value="启动" id="start_btn" class="btn_new"
                                   onclick="operateMachine('1')"/>
                            <input type="button" value="关闭" id="stop_btn" class="btn_new"
                                   onclick="operateMachine('2')"/>
                            <input type="button" value="重启" id="reset_btn" class="btn_new"
                                   onclick="operateMachine('3')"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>状态查询</legend>
                <input type="button" value="查询" class="btn_new" onclick="queryRunningStatus()"/>
                <table style="width: 100%" border="1">
                    <tr style="height:40px">
                        <th style="width:100px">PCSCF：<span id="pcscf_status">未知</span></th>
                        <th style="width:100px">SCSCF：<span id="scscf_status">未知</span></th>
                        <th style="width:100px;display:none">MGCF：<span id="mgcf_status">未知</span></th>
                        <th style="width:100px;display:none">MGCF网关：<span id="mgcf_sip_status">未知</span></th>
                        <th style="width:100px">HSS_CX：<span id="hss_cx_status">未知</span></th>
                        <th style="width:100px;display:none">SMC：<span id="smc_status">未知</span></th>
                        <th style="width:100px">PCF：<span id="nrf_status">未知</span></th>
                    </tr>
                </table>
            </fieldset>

        </div>

    </div>
    <br/>
    <br/>

    <div class="innerBox" style="overflow: auto;">
        <div class="tabBar tab_tile">用户管理</div>
        <div class="parameterGridBox paramsDIV"
             style="overflow-y: auto;padding-left: 20px;padding-top: 20px">
            <div>
                <table>
                    <tr>
                        <th>IMSI：</th>
                        <td>
                            <input type="text" id="imsi" style="width:180px"/>
                        </td>
                        <th>MSISDN：</th>
                        <td>
                            <input type="text" id="msisdn" style="width:180px"/>
                        </td>
                        <th>KI：</th>
                        <td>
                            <input type="text" id="ki" style="width:180px"/>
                        </td>
                        <th>OPC：</th>
                        <td>
                            <input type="text" id="opc" style="width:180px"/>
                        </td>
                        <td>
                            <input type="button" value="新增" class="btn_new" onclick="saveUserItem()"/>
                        </td>
                    </tr>
                </table>
            </div>
            <hr/>
            <div>
                <form method="post" name="upgradeForm" action="/batch_add_user" enctype="multipart/form-data">
                    <input type="file" name="file" id="upload_file" placeholder="输入txt文件"
                           style="width: 250px;height: 20px;padding: 4px"/>
                    <input type="button" class="btn_new" style="float: none;"
                           onclick="batchAddUser()" value="批量新增"/>
                </form>
            </div>
        </div>
        <hr/>
        <div>
            <input type="button" value="删除" class="btn_new" onclick="delSelectedUserItem()"/>
        </div>
        <div style="max-height:500px;overflow-y:auto">

            <table style="width: 90%;" cellpadding="10" border="1"
                   id="white_list_table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th align="left"><input type="checkbox" id="selectAll"/>全选/反选</th>
                    <th>IMSI</th>
                    <th>MSISDN</th>
                    <th>KI</th>
                    <th>OPC</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
</div>


</div>
</div>
<br/>
<br/>

</body>
<script type="text/javascript" src="/static/public/event.js?v=20130922"></script>
</html>
